<template>
  <view class="flex-col page">
    <view class="flex-col">
      <u-skeleton
        rows="10"
        :loading="loading"
        :title="false"
        rowsHeight="110"
        style="margin-top: 30rpx"
      >
      </u-skeleton>

      <view class="no" v-if="total === 0">
        <zNo></zNo>
      </view>
      <view class="list">
        <view
          class="list-view"
          v-for="(item, index) in productlList"
          :key="index"
        >
          <view class="img">
            <image
              class="image"
              :src="item.avatar"
              mode="aspectFill"
              @click="previewimage(item.album)"
            >
            </image>
            <image class="pos" src="../../static/zy/10@2x.png" mode=""></image>
            <view class="socre">{{ item.stars }}星级</view>
          </view>
          <view class="right">
            <view class="h1">
              <image class="news" src="../../static/zy/new.png" mode=""></image>
              <text @click="toPath(item)">{{ item.realname }}</text>
              <image
                class="shop"
                src="../../static/zy/shangjia.png"
                mode=""
              ></image>
              <view class="text" @click="toTeinfo(item)">商家</view>
              <view
                class="time"
                v-if="item.appointment_time === '休息中'"
              ></view>
              <view class="time" v-else
                >最早可约：{{ item.appointment_time }}</view
              >
            </view>
            <view class="h2">
              <image
                class="star"
                src="@/static/zy/shoucangx.png"
                mode=""
              ></image>
              <text class="num">{{ item.praise }}</text>
              <view class="btn"> {{ item.practice }}年经验 </view>
              <view class="address">
                <image src="../../static/zy/dingwei4@2x.png" mode=""></image
                >距离{{ item.distance }}km
              </view>
            </view>
            <view class="h3">
              <text>{{ item.label_top }}</text>
              <view
                @click="toPath(item)"
                :class="item.appointment_time === '休息中' ? 'grey' : ''"
              >
                {{ item.appointment_time === "休息中" ? "服务中" : "立即预约" }}
              </view>
            </view>
            <view class="h4">
              <view>
                <!-- <image src="../../static/zy/xihuan6@2x.png" mode=""></image> -->
                <image
                  v-if="item.collect"
                  src="../../static/my/itemc.png"
                  class="image_17"
                  @click="changeCollect(item, index, 0)"
                />
                <image
                  v-else
                  src="../../static/zy/xihuan6@2x.png"
                  class="image_17"
                  @click="changeCollect(item, index, 1)"
                />

                <text v-if="item.collect" @click="changeCollect(item, index, 0)"
                  >{{ item.collectCount }}收藏</text
                >
                <text v-else @click="changeCollect(item, index, 1)"
                  >{{ item.collectCount }}收藏</text
                >
              </view>
              <view @click="toComment(item)">
                <image src="../../static/zy/pinglun7@2x.png" mode=""></image>
                <text>{{ item.comment }}评论</text>
              </view>
              <view>
                <image src="../../static/zy/dingdan@2x.png" mode=""></image>
                <text>{{ item.sales }}单</text>
              </view>
            </view>
          </view>
        </view>
        <view class="list-view" style="opacity: 0"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      productlList: [],
      latitude: "",
      longitude: "",
      value: "",
      dataList: [],
      total: null,
      page: 1,
      name: "",
      shownone: false,
    };
  },
  onLoad(options) {
    // uni.$u.sleep(2000).then(() => {

    // })

    let { name } = options;
    if (name) {
      this.name = name;
    }
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    uni.getLocation({
      altitude: false,
      geocode: true,
      type: "gcj02",
      success: (res) => {
        this.longitude = res.longitude;
        this.latitude = res.latitude;
        this.init();
      },
      fail: (err) => {
        this.latitude = 39.5;
        this.longitude = 116.3;
        this.init();
      },
    });
  },
  methods: {
    previewimage(imageUrl) {
      //预览图片
      console.log(imageUrl);
      var images = [];
      images.push(imageUrl);
      uni.previewImage({
        // 图片路径必须是一个数组 => ['']
        current: 0,
        urls: imageUrl,
      });
    },
    init() {
      let order_info = uni.getStorageSync("order_info");

      this.$http
        .post("api/technician/index", {
          lat: this.latitude,
          lng: this.longitude,
          realname: this.value,
          service_id: order_info.service_id,
          page: this.page,
        })
        .then((res) => {
          console.log(res, "xxxx");
          let { list, total } = res;
          list.length == 0 ? (this.shownone = true) : false;
          this.productlList.push(...list);
          this.total = total;
          this.loading = false;
          uni.hideLoading();
        })
        .catch((Error) => {
          uni.hideLoading();
        });
    },
    toPath(item) {
      if (item.appointment_time == "休息中") {
        uni.showToast({
          title: "该技师在休息中",
          icon: "none",
        });
        return;
      }
      let order_info = uni.getStorageSync("order_info");
      order_info.technician_id = item.id;
      uni.setStorageSync("order_info", order_info);
      uni.navigateTo({
        url: `/pages/confirm_order/confirm_order?id=${item.id}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  padding-bottom: 10rpx;
  background-color: #f8f8f8;
  height: 100%;
  width: 100%;
  overflow-y: auto;

  .section_1 {
    padding: 50rpx 32rpx 206rpx;

    background-image: linear-gradient(
      180deg,
      rgb(49, 208, 129) 0%,
      rgb(49, 208, 129) 2.91%,
      rgb(36, 194, 116) 75.56%,
      rgb(248, 248, 248) 92.1%,
      rgb(248, 248, 248) 100%
    );

    .group {
      color: rgb(255, 255, 255);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;

      .group_2 {
        margin-left: 54rpx;

        .image_1 {
          margin-bottom: 4rpx;
          width: 28rpx;
          height: 34rpx;
        }

        .text_1 {
          margin-left: 14rpx;
        }
      }

      .image {
        width: 40rpx;
        height: 40rpx;
      }

      .text {
        margin-left: 8rpx;
      }
    }

    .section_2 {
      margin-top: 24rpx;
      padding: 26rpx 24rpx;
      color: rgb(24, 181, 103);
      font-size: 32rpx;
      font-weight: 500;
      line-height: 44rpx;
      white-space: nowrap;
      background-color: rgb(255, 255, 255);
      border-radius: 24rpx 24rpx 0px 0px;

      .image_2 {
        width: 48rpx;
        height: 48rpx;
      }

      .text_2 {
        margin-left: 8rpx;
      }
    }
  }

  .list {
    padding: 0rpx 25rpx 0;
    //#ifdef APP-PLUS
    padding: 0rpx 25rpx 0;

    //#endif
    &-view {
      padding: 25rpx;
      background-color: white;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      display: flex;

      .img {
        width: 180rpx;
        height: 225rpx;
        flex-shrink: 0;
        position: relative;

        .image {
          width: 180rpx;
          height: 225rpx;
          border-radius: 10rpx;
        }

        .pos {
          width: 71rpx;
          height: 36rpx;
          position: absolute;
          top: 0;
          left: -6rpx;
        }

        .socre {
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 0 15rpx;
          height: 33rpx;
          background: linear-gradient(-62deg, #f28e26 0%, #fd644f 100%);
          border-radius: 10rpx 0px 10rpx 0px;
          color: white;
          font-size: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .right {
        flex: 1;
        margin-left: 20rpx;
        height: 225rpx;
        display: flex;
        flex-direction: column;

        .h1 {
          display: flex;
          align-items: center;
          color: #808080;
          font-size: 23rpx;

          .news {
            width: 45rpx;
            height: 23rpx;
            margin-right: 10rpx;
          }

          text {
            color: #0a0a0a;
            font-size: 30rpx;
          }

          .shop {
            margin-left: 20rpx;
            width: 24rpx;
            height: 23rpx;
            margin-right: 5rpx;
          }

          .text {
            flex: 1;
          }

          .time {
            //width: 191rpx;
            height: 46rpx;
            background: #f2f9ec;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #62c281;
            font-size: 20rpx;
          }
        }

        .h2 {
          display: flex;
          align-items: center;
          margin-top: 10rpx;

          .star {
            width: 22rpx;
            height: 21rpx;
          }

          .num {
            color: #ff6100;
            margin-left: 10rpx;
            font-size: 24rpx;
          }

          .btn {
            width: 119rpx;
            height: 39rpx;
            flex-shrink: 0;
            background: #faf4e8;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #c28134;
            font-size: 20rpx;
            margin-left: 20rpx;
          }

          .address {
            flex: 1;
            display: flex;
            color: #999999;
            font-size: 20rpx;
            align-items: center;
            justify-content: flex-end;

            image {
              margin-right: 12rpx;
              width: 20rpx;
              height: 22rpx;
            }
          }
        }

        .h3 {
          display: flex;
          align-items: center;
          color: #3ca970;
          font-size: 22rpx;
          margin-top: 20rpx;

          text {
            flex: 1;
          }

          view {
            flex-shrink: 0;
            width: 139rpx;
            height: 52rpx;
            background: linear-gradient(90deg, #3ba96f 0%, #57b88a 100%);
            border-radius: 26rpx;
            color: white;
            font-size: 24rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .grey {
            background: #e00 !important;
          }
        }

        .h4 {
          display: flex;
          flex: 1;
          align-items: flex-end;

          view {
            display: flex;
            align-items: center;
            color: #808080;
            font-size: 20rpx;
            margin-right: 30rpx;

            image {
              margin-right: 10rpx;
            }
          }

          view:first-of-type {
            image {
              width: 23rpx;
              height: 20rpx;
            }
          }

          view:nth-of-type(2) {
            image {
              width: 20rpx;
              height: 21rpx;
            }
          }

          view:nth-of-type(3) {
            image {
              width: 17rpx;
              height: 21rpx;
            }
          }
        }
      }
    }
  }
}

// .unab /deep/ .uni-nav-bar-text {
// 	font-size: 36rpx;
// 	font-family: PingFangSC-Semibold, PingFang SC;
// 	font-weight: 600;
// 	color: #333333;
// }

.b5 {
  width: 535rpx;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 28rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
}

.rows1 {
  align-items: center;
}

.imgLey {
  -webkit-animation-name: scaleDraw;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2.5s;
}

@keyframes scaleDraw {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }
}

.ul1 {
  width: 128rpx;
  height: 42rpx;
  background: #1dd39b;
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 42rpx;
  margin-top: 7rpx;
}

.ul2 {
  width: 128rpx;
  height: 42rpx;
  background: #1dd39b;
  border-radius: 21rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 42rpx;
  margin-top: 7rpx;
}

.ul3 {
  width: 128rpx;
  height: 42rpx;
  border-radius: 21px;
  border: 1px solid #727272;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727272;
  text-align: center;
  line-height: 42rpx;
  margin-top: 7rpx;
}

.moreImg {
  width: 114rpx;
  height: 42rpx;
  background: #1dd39b;
  border-radius: 9rpx;
  display: inline-block;
  margin-left: 15rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 42rpx;
}

.t8 {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727272;
}

.image_71 {
  width: 22rpx;
  height: 26rpx;
  margin-right: 7rpx;
  margin-top: 6rpx;
}

.image_71txt {
  color: #333;
  font-size: 26rpx;
}
</style>
